<template>
  <plain-page style="width: max-content;margin: 0 auto;">
    <el-card shadow="never">
      <span slot="header">账单总计</span>
      <el-row>
        <el-col
          v-for="item in summaries"
          :key="item.title"
          :span="item.span">
          <span class="title">{{item.title}}{{item.subTitle}}</span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 8px">
        <el-col
          v-for="item in summaries"
          :key="item.title"
          :span="item.span">
          <span class="number">{{totals[item.field] || 0}}</span>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" style="margin-top: 4px;min-width: 1270px;" :style="{height: 'calc(100% - 132px)'}">
      <span slot="header">账单明细</span>
      <data-table-app-view :containerSubtractHeight="168">
        <div slot="toolbar">
          <el-button
            type="default"
            icon="el-icon-download"
            @click="onExportClick"
          >
            导出
          </el-button>
        </div>
        <data-table
          ref="table"
          url="/api/providerbillstat/dailyTradeAmountPage"
          :pagination="{pageSize: 15}"
          :loadFilter="loadFilter"
          lazy
        >
          <el-table-column prop="createDate" label="日期" width="120"></el-table-column>
          <el-table-column prop="total1" label="购买余额" width="110"></el-table-column>
          <el-table-column prop="total3" label="用户总消费" width="110"></el-table-column>
          <el-table-column prop="total3_online" label="用户线上消费" width="110"></el-table-column>
          <el-table-column prop="total3_cash" label="用户现金消费" width="110"></el-table-column>
          <el-table-column prop="total4" label="给用户充值" width="110"></el-table-column>
          <el-table-column prop="totalpp" label="赠送金额" width="110"></el-table-column>
          <el-table-column prop="total5" label="用户退款" width="110"></el-table-column>
          <el-table-column prop="total11" label="返还余额" width="110"></el-table-column>
          <el-table-column prop="totalincome" label="销售额(用户总消费-返还余额)" width="210"></el-table-column>
        </data-table>
      </data-table-app-view>
    </el-card>
  </plain-page>
</template>

<script>
import { stringify } from 'qs';

export default {
  pageProps: {
    title: ({params, subTitle}) => subTitle(params.shop.name, '账单明细')
  },
  data() {
    return {
      searchForm: {
        providerId: this.$params.shop.id
      },
      summaries: [
        {title: '购买余额', field: 'total1', span: 2},
        {title: '用户总消费', field: 'total3', span: 3},
        {title: '用户线上消费', field: 'total3_online', span: 3},
        {title: '用户现金消费', field: 'total3_cash', span: 3},
        {title: '给用户充值', field: 'total4', span: 3},
        {title: '赠送金额', field: 'totalpp', span: 2},
        {title: '用户退款', field: 'total5', span: 2},
        {title: '返还余额', field: 'total11', span: 2},
        {title: '销售额', subTitle: '(用户总消费-返还余额)', field: 'totalincome', span: 4},
      ],
      totals: {}
    }
  },
  mounted() {
    this.$refs.table.query(this.getQueryParams());
    
    this.$http.get('/api/providerbillstat/page', {params: {providerId: this.$params.shop.id}}).then((page) => {
      let totals = this.loadFilter(page).rows[0];
      this.totals = totals || {};
    });
  },
  methods: {
    getQueryParams() {
      let queryParams = {...this.searchForm};
      queryParams = {
        ...queryParams,
        ...(queryParams.createTimes ? {
            startCreateTime: queryParams.createTimes[0],
            endCreateTime: queryParams.createTimes[1]
          } : {})
      };
      delete queryParams.createTimes;
      return queryParams;
    },
    loadFilter(page) {
      page.rows.forEach((row) => {
        _.forEach(row.tradeTypeAmountMap, function(v, k){
            row['total' + k] = v;
        });
      });
      return page;
    },
    onExportClick() {
      this.$message.info('正在处理导出，请稍等...');
      location.href = "api/providerbillstat/exportTradeDetail?" + stringify(this.getQueryParams());
    }
  }
}
</script>

<style scoped>
>>> .el-card__header {
  padding: 8px 20px;
}
.title {
  font-size: 14px;
  color: #909399;
}
.number {
  color: #606266;
}
</style>